<template>
  <div class="goosList-container">
    <router-link :to="'/home/goodsInfo/'+item.id" class="goods-item" v-for='item in list' :key='item.id' @click='getList(id)'>
      <img src="../../src/images/07.jpg">
      <h1 class="title">{{item.msg}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥799</span>
          <span class="old">￥899</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩60件</span>
        </p>
      </div>
    </router-link>
    <mt-button type="danger" size='large' @click="add">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      list:[
        {id:1,msg:'小米手机666'},
        {id:2,msg:'小米手机aaa'},
        {id:3,msg:'小米手机呱呱叫'},
        {id:4,msg:'小米手机你说好'}
      ]
    }
  },
  methods:{
    add(){
      var list = [{id:this.list[this.list.length-1].id+1,msg:'小米手机你说好'},{id:this.list[this.list.length-1].id+2,msg:'小米手机你说好'},{id:this.list[this.list.length-1].id+3,msg:'小米手机你说好'}]; 
      this.list = this.list.concat(list);
    },
    getList(id){
      //编程式导航
      //第一种
      // this.$router.push("/home/goodsInfo/" + id)
      //第二种
      // this.$router.push({path: "/home/goodsInfo/" + id})
      //第三种
      // this.$router.push({name:'goodsInfo',params:{id}})
    }
  }
}
</script>
<style lang="scss" scoped>
  .goosList-container {
    display: flex;
    justify-content: space-between;
    flex-wrap:  wrap;
    padding: 0 5px;
    margin: 10px 0;
    background-color: #eee;
    .goods-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 49%;
      min-height: 255px;
      margin: 3px 0;
      background-color: #fff;
      box-shadow: 3px -3px 8px #ccc;
      color: #000;
      .title {
        font-size: 14px;
      }
      .info { 
        background-color: rgba(0,255,0,0.8);  
        .price {
          margin: 5px 0;
          font-size: 12px;
          .now {
            font-size: 16px;
            color: red;
            font-weight: 700;
          }
          .old {
            margin-left: 10px;
            font-size: 12px;
            text-decoration: line-through
           
          }
        }
      }
      .sell{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
      
      img {
        width: 100%;
      }
    }
  }
  
</style>